<template>
	<view class="recharge">
		<topTitle  :title="$t('recharge.title')">
			<template #right>
				<image class="icon" @click="goTo('/pages/index/rechargeDetail')" src="@/static/image/62.png"
					mode="widthFix" />
			</template>
		</topTitle>
		<view class="accountSelection">
			<view class="title">
			<view>{{ $t('recharge.accountSelection.title') }}</view>
			        <view>{{ $t('recharge.accountSelection.note') }}</view>
			</view>
			<view class="list">
				 <view :class="{ active: operation_account == 2 }" @click="operation_account = 2">
				          <view>{{ $t('recharge.accountSelection.quantificationAccount.title') }}</view>
				          <view>{{ $t('recharge.accountSelection.quantificationAccount.description') }}</view>
				        </view>
				        <view :class="{ active: operation_account == 3 }" @click="operation_account = 3">
				          <view>{{ $t('recharge.accountSelection.intelligentAccount.title') }}</view>
				          <view>{{ $t('recharge.accountSelection.intelligentAccount.description') }}</view>
				        </view>
			</view>
			<view class="title">
				<view>{{ $t('recharge.rechargeAddress.title') }}</view>
			</view>
			<view class="rechargeAddress">
				<view>BEP20-USDT</view>
				<view class="codeBg">
					<up-qrcode :size="150" :val="address"></up-qrcode>
				</view>
				<view>
					{{ address }}
					<image @click="copyText(address)" class="icon" src="@/static/image/80.png" mode="widthFix" />
				</view>
				<view class="btn" @click="hashShow = true">{{ $t('recharge.rechargeAddress.btnText') }}</view>
				<view class="tips">
					<view>{{ $t('recharge.rechargeAddress.tipsTitle') }}</view>
					<view>{{ $t('recharge.rechargeAddress.tips1') }}</view>
					<view>{{ $t('recharge.rechargeAddress.tips2') }}</view>
					<view>{{ $t('recharge.rechargeAddress.tips3') }}</view>
				</view>
			</view>
		</view>
		  <up-modal :show="hashShow" :confirmText="$t('recharge.hashInput.confirm')" :cancelText="$t('recharge.hashInput.cancel')" :title="$t('recharge.hashInput.title')" :showCancelButton="true" @cancel="hashShow = false" @confirm="confirm">
		      <up-input :placeholder="$t('recharge.hashInput.placeholder')" border="surround" focus v-model="hash"></up-input>
		    </up-modal>
	</view>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from "vue";
const instance = getCurrentInstance()?.appContext.config.globalProperties;
import { onLoad } from "@dcloudio/uni-app";
import { UsdtChannelAdress, HashRepair } from "@/api/UserApi";


let channel_Id = ref<string>()
let operation_account = ref<number>(2)

let address = ref<string>('')
onLoad((options: any) => {
	if (options.channel_Id) {
		channel_Id.value = options.channel_Id
		UsdtChannelAdressFn()
	}
});

const UsdtChannelAdressFn = () => {
	UsdtChannelAdress({ channel_Id: channel_Id.value }).then((e) => {
		address.value = e.address
	})
}
let hashShow = ref<boolean>(false);
let hash = ref<string>();
const confirm = async (e: any) => {
	HashRepair({ hash: hash.value ,operation_account:operation_account.value}).then((e) => {
		hash.value=''
		instance?.goTo('/pages/index/completed?type=recharge&title=储值完成')
	})

};


</script>
<style scoped lang="scss">
@import "../../static/scss/recharge.scss";
</style>